"use strict";
var vue = new Vue({
    el: '#app',
    data() {
        var checkNickname = (rule, value, callback) => {
            var test = /^[\u4E00-\u9FA5A-Za-z0-9]{1,64}$/;
            if (!test.test(value)) {
                return callback(new Error("昵称只能是正文英文或数字组合，长度在1到64之间！"));
            }
            callback();
        };
        return {

            vueHeader: {
                // 必须要声明一下，否则找不到变量
                userInfo: {}
            },
            // uploadAvatarUrl: addressUCUploadAvatar,
            // imageUrl: '',

            file: null, // 头像图片源文件
            compressedFile: null, // 压缩后的文件
            previewImageUrl: "", // 图像回显地址

            leftOptionDrawer: false, // 左侧选项抽屉是否打开
            drawerWidth: "30%",
            optionList: [{
                id: 1,
                imageUrl: "/img/buttonIcon/头像_女孩.png",
                text: "修改头像"
            }, {
                id: 2,
                imageUrl: "/img/buttonIcon/身份证.png",
                text: "修改昵称"
            }, {
                id: 3,
                imageUrl: "/img/buttonIcon/收藏.png",
                text: "我的收藏"
            }, {
                id: 4,
                imageUrl: "/img/buttonIcon/设置.png",
                text: "其他"
            }],
            collectionOptionList: [
                {
                    id: 1,
                    imageUrl: "/img/buttonIcon/收藏.png",
                    text: "收藏的帖子",
                    href: "/post.html?isCollectionLimit=1"
                }
                // , {
                //     id: 2,
                //     imageUrl: "/img/buttonIcon/收藏.png",
                //     text: "收藏的XX",
                //     href: "#"
                // }, {
                //     id: 3,
                //     imageUrl: "/img/buttonIcon/收藏.png",
                //     text: "收藏的XX",
                //     href: "#"
                // }
            ],
            optionActiveId: 1, // 当前选中的选项id
            // 表单中的数据
            nicknameFromData: {
                userNickname: "",
            },
            // 表单的校验规则
            nicknameFromRules: {
                userNickname: [
                    { required: true, message: "请输入昵称", trigger: "blur" },
                    { validator: checkNickname, trigger: "blur" }
                ]
            },
            isNicknameChanging: false, // 是否正在修改用户昵称
            isAvatarChanging: false, // 是否正在调整头像
            test: false
        }
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created() {
        console.log("用户主页加载");
    },
    mounted() {

    },
    methods: {
        toHref(href) {
            location.href = href;
        },
        /**
         * 上传文件改变事件
         * 就是用户选择了图片或更改了图片后触发的事件
         * @param {Event} event 事件
         */
        inputChange(event) {
            this.isAvatarChanging = true;
            // 获取文件
            this.file = event.target.files[0];

            if (this.file.size > 10 * 1024 * 1024) {
                this.$notify.error({ title: "错误", message: "图像大小不得超过10MB" });
                this.isAvatarChanging = false;
            } else {
                this.compressImage(this.file);
            }
        },
        /**
         * 压缩图片主函数
         * @param {File} file 图片文件
         */
        compressImage(file) {
            let that = this; // 不可省略
            var options = {
                file: file,
                // 压缩策略---------------
                quality: 0.7,
                mimeType: "image/jpeg",
                maxWidth: 400,
                maxHeight: 400,
                width: 400,
                height: 400,
                minWidth: 200,
                minHeight: 200,
                convertSize: Infinity,
                loose: true,
                redressOrientation: true,
                // 压缩策略结束-------------

                // 压缩前回调
                beforeCompress: function (result) {
                    console.log('压缩之前图片尺寸大小: ', result.size);
                    console.log('mime 类型: ', result.type);
                },

                // 压缩成功回调
                success: function (result) {
                    // 注意：file表示原来的图像，result表示压缩后的图像
                    console.log('压缩之后图片尺寸大小: ', result.size);
                    console.log('mime 类型: ', result.type);
                    console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
                    // 保存压缩后的图像
                    // 这个图像的
                    that.compressedFile = result;

                    // 使用ImageCompressor.file2DataUrl方式回显
                    // 将图片解析为Base64编码，这里的URL并非真正的url，而是base64编码
                    // 但是可以在image:src和background-image: url()里正常使用
                    // ImageCompressor.file2DataUrl(result, function (url) {
                    //     that.previewImageUrl = url;
                    // })

                    // 使用URL.createObjectURL方式回显
                    // 此方式返回的时候一个内存级的url，通用可以正常使用
                    that.previewImageUrl = URL.createObjectURL(result)
                    that.isAvatarChanging = false;
                },

                // 发生错误
                error: function (msg) {
                    that.isAvatarChanging = false;
                    that.$notify.error({ title: "错误", message: "图像压缩发生错误" });
                }
            };

            new ImageCompressor(options);
        },

        upload() {
            this.isAvatarChanging = true;
            // 判断用户是否选择了头像文件
            if (this.file == null) {
                this.$notify.error({ title: "错误", message: "您必须选择图片文件" });
                this.isAvatarChanging = false;
                return false;
            }

            let formData = new FormData();
            // 上传多文件就把文件放到this.compressedFile列表中，然后循环
            formData.append("avatar", this.compressedFile);
            axios.post(addressUCUploadAvatar, formData).then((result) => {
                if (result.data.flag) {
                    // 上传成功后要刷新整个页面
                    this.$notify({ title: "成功", message: result.data.message, type: "success" });
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    this.$notify.error({ title: "错误", message: result.data.message });
                    // 设置头像修改部分页面可用
                    this.isAvatarChanging = false;
                }
            });
        },

        // 重置为默认头像
        resetUserAvatar() {
            console.log("准备重置用户头像...");
            // 设置头像修改部分页面不可用
            this.isAvatarChanging = true;
            this.$notify.info({ title: "提示", message: "正在重置默认头像，请稍后！" });
            axios.get(addressUCResetUserAvatar, {}).then((result) => {
                console.log(result.data);
                if (result.data.flag) {
                    this.$notify({
                        title: "成功",
                        message: result.data.message,
                        type: "success"
                    });
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    this.$notify.error({
                        title: "错误",
                        message: result.data.message
                    });
                    // 设置头像修改部分页面可用
                    this.isAvatarChanging = false;
                }
            });
        },
        // 控制左侧抽屉开关
        leftDrawerOpenController() {
            this.leftOptionDrawer = !this.leftOptionDrawer;
        },
        sendNickname(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.isNicknameChanging = true;
                    // 发送请求
                    this.$notify.info({ title: "提示", message: "正在修改，请稍后！" });
                    axios.put(adderssUCChangeUserNickname, this.nicknameFromData).then((result) => {
                        if (result.data.flag) {
                            this.$notify({ title: "成功", message: result.data.message, type: "success" });
                            // 跳转到主页
                            setTimeout(() => {
                                location.reload();
                            }, "1000");
                        } else {
                            this.$notify.error({ title: "错误", message: result.data.message });
                            this.isNicknameChanging = false;
                        }
                    });
                } else {
                    console.log("表单校验未通过！");
                    this.isNicknameChanging = false;
                    return false;
                }
            });
        },
        // 清空表单，这个方法可以通用
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 注意，此方法由vueHeader在窗口大小发生变化的时候自动调用
        vueHeaderOnresize(width, height) {
            if (width < 992) {
                this.drawerWidth = "30%";
            } else if (width < 1200) {
                this.drawerWidth = "30%";
            } else {
                this.drawerWidth = "30%";
            }
        },
        // 注意，此方法由vueHeader在创建时自动调用，参数为vueHeader自身对象
        // 可以在vueHeader对象中获取到它的所有信息
        vueHeaderCreated(vueHeader) {
            console.log("vueHeader对象：");
            console.log(vueHeader);
            this.vueHeader = vueHeader;
        }
    }
});